<template>
	<view>
		<AppHeader background="#fff" contentStyle="padding:0 20rpx;">
			<view class="header-left">
				<text class="date-day">{{ day }}</text>
				<view class="date-month-year">
					<text>{{ month }}.</text>
					<text>{{ year }}</text>
				</view>
			</view>
			<view class="header-right">
				<text class="city">{{ city }}</text>
				<text class="weather">{{ weather }}</text>
			</view>
		</AppHeader>
		<view class="content">
			<image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AppHeader from '../../components/AppHeader.vue'

const title = ref('Hello')
const day = ref('')
const month = ref('')
const year = ref('')
const city = ref('获取中...')
const weather = ref('')

function updateDate() {
	const date = new Date()
	day.value = date.getDate().toString().padStart(2, '0')
	month.value = date.toLocaleString('en-US', { month: 'short' })
	year.value = date.getFullYear()
}

function getLocationAndWeather() {
	uni.getLocation({
		type: 'wgs84',
		success: function (res) {
			// res.latitude, res.longitude
			// 在这里调用天气API
			// 示例数据：
			city.value = "北京"
			weather.value = "晴 25°C"
		},
		fail: function() {
			city.value = "定位失败"
		}
	});
}

onMounted(() => {
	updateDate()
	getLocationAndWeather()
})
</script>

<style>
	.header-left, .header-right {
		display: flex;
		align-items: baseline;
	}
	.date-day {
		font-size: 28px;
		font-weight: bold;
		margin-right: 5px;
	}
	.date-month-year {
		display: flex;
		font-size: 12px;
	}
	.city {
		font-size: 16px;
		margin-right: 10px;
	}
	.weather {
		font-size: 14px;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
